import Taro, { Component } from '@tarojs/taro'
import {View, ScrollView, Text, Image } from '@tarojs/components'
import {AtFloatLayout, AtInputNumber, AtTextarea, AtRadio } from "taro-ui"
import { connect } from '@tarojs/redux'
import { IconFont } from '@components'
import { getWindowHeight } from '@utils/style'
import jump from '@utils/jump'
import * as actions from '@actions/order'
import './afterSale.scss'

@connect(state => state.order, { ...actions })
class AfterSale extends Component {
  config = {
    navigationBarTitleText: '售后'
  }

  constructor(props) {
    super(props)
    const params = this.$router.params
    const type = parseInt(params.type)
    const orderNo = params.orderNo
    var item = {
      num: 0
    }
    if (params.item) {
      item = JSON.parse(params.item)
    }
    super(props)
    this.state = {
      type: type,
      orderNo: orderNo,
      applyNum: 1,
      openReturn: false,
      returnWay: '物流寄回',
      openReason: false,
      applyReason: '',
      applyContent: '',
      item: item
    }
  }

  componentDidMount() {
    if (this.state.type === 1) {
      Taro.setNavigationBarTitle({title: "退货"})
    } else if (this.state.type === 2) {
      Taro.setNavigationBarTitle({title: "换货"})
    }
    if (!this.state.applyReason) {
      this.setState({ openReason: true })
    }
  }

  handleCntUpdate = (cnt) => {
    this.setState({ applyNum: cnt })
  }

  handleContentChange (event) {
    this.setState({ applyContent: event.target.value })
  }

  handleCloseReason = () => {
    this.setState({ openReason: false })
  }

  handleOpenReason = () => {
    this.setState({ openReason: true })
  }

  handleReasonChange (value) {
    this.setState({ applyReason: value })
  }

  handleCloseReturn = () => {
    this.setState({ openReturn: false })
  }

  handleOpenReturn = () => {
    this.setState({ openReturn: true })
  }

  handleReturnChange (value) {
    this.setState({ returnWay: value })
  }

  handleSave = () => {
    // 校验
    if (this.state.applyReason === '') {
      Taro.showToast({
        title: '请选择申请原因',
        icon: 'none',
      });
      return;
    }
    if (this.state.applyContent === '') {
      Taro.showToast({
        title: '请输入具体原因',
        icon: 'none',
      });
      return;
    }
    if (this.state.returnWay === '') {
      Taro.showToast({
        title: '请选择返回方式',
        icon: 'none',
      });
      return;
    }

    const payload = {
      type: this.state.type,
      orderNo: this.state.orderNo,
      itemId: this.state.item.itemId,
      skuId: this.state.item.skuId,
      applyNum: this.state.applyNum,
      applyReason: this.state.applyReason,
      applyContent: this.state.applyContent,
      returnWay: this.state.returnWay
    }
    this.props.dispatchServiceOrderSubmit(payload).then(() => {
      Taro.navigateBack()
    })
  }

  render() {
    const { item, applyNum, applyReason, applyContent, returnWay} = this.state
    const height = getWindowHeight(false)

    return (
      <View className='container'>
        <ScrollView
          scrollY
          className='container-wrap'
          style={{ height }}
        >
          <View className='container-box'>
            <View className='item-warp'>
              <Image className='item__img' src={item.pic} />
              <View className='item__info'>
                <View className='item__info-name' numberOfLines={2}>
                  {item.itemName}
                </View>

                <View className='item__info-b'>
                  <Text className='item__info-b-name'>单价:</Text><Text className='item__info-b-value'>{'¥' + item.sellingPrice}</Text>
                  <Text className='item__info-b-name'>购买数量:</Text><Text className='item__info-b-value'>{item.num}</Text>
                  <Text className='item__info-b-name'>申请数量:</Text><Text className='item__info-b-value'>{applyNum}</Text>
                </View>
              </View>
            </View>

            <View className='item__apply'>
              <Text className='item__apply-label'>申请数量</Text>
              <AtInputNumber
                step={1}
                value={applyNum}
                max={item.num}
                min={1}
                onChange={this.handleCntUpdate.bind(this)}
              />
            </View>
          </View>

          <View className='container-box'>
            <View className='af__box-head'>
              <View className='af__box-head-l'>申请原因</View>
              <View className='af__box-head-r'>
                <Text className='af__box-head-r-txt'>{applyReason ? applyReason : '请选择申请原因'}</Text>
                <View onClick={this.handleOpenReason.bind(this)}><IconFont name='gengduo' size={60}  /></View>
              </View>
            </View>
            <View className='af__apply-reason'>
              <AtTextarea
                value={applyContent}
                onChange={this.handleContentChange.bind(this)}
                maxLength={500}
              />
            </View>
          </View>

          {
            this.state.type === 1 &&
            <View className='container-box'>
              <View className='af__box-head'>
                <View className='af__box-head-l'>退款方式</View>
                <View className='af__box-head-r'>
                  <Text className='af__box-head-r-txt'>原支付返还</Text>
                  <IconFont name='gengduo' size={60} />
                </View>
              </View>
            </View>
          }

          <View className='container-box'>
            <View className='af__box-head'>
              <View className='af__box-head-l'>返回方式</View>
              <View className='af__box-head-r'>
                <Text className='af__box-head-r-txt'>{returnWay}</Text>
                <View onClick={this.handleOpenReturn.bind(this)}><IconFont name='gengduo' size={60}  /></View>
              </View>
            </View>
          </View>

          <View className='af__apply-footer'>
            <Text className='af__apply-footer-tip'>提交服务单后，售后专员可能会与您电话沟通，请保持手机畅通</Text>
            <View className='af__apply-footer-btn' onClick={this.handleSave} >保存</View>
          </View>
        </ScrollView>

        <AtFloatLayout isOpened={this.state.openReason} onClose={this.handleCloseReason} title='申请原因'>
          <AtRadio
            options={[
              { label: '发错货', value: '发错货'},
              { label: '商品损坏', value: '商品损坏'},
              { label: '商品与页面描述不符', value: '商品与页面描述不符'},
              { label: '缺少件', value: '缺少件'},
              { label: '质量问题', value: '质量问题'},
              { label: '其他', value: '其他' }
            ]}
            value={applyReason}
            onClick={this.handleReasonChange.bind(this)}
          />
        </AtFloatLayout>

        <AtFloatLayout isOpened={this.state.openReturn} onClose={this.handleCloseReturn} title='申请原因'>
          <AtRadio
            options={[
              { label: '物流寄回', value: '物流寄回'},
              { label: '上门取件', value: '上门取件'},
              { label: '送货至自提点', value: '送货至自提点'}
            ]}
            value={returnWay}
            onClick={this.handleReturnChange.bind(this)}
          />
        </AtFloatLayout>

      </View>
    );
  }
}

export default AfterSale
